<template>
  <div class="box">
    <el-card>
      <el-form ref="loginForm" :model="form" :rules="rules" class="login-box">
        <h3 class="login-title">旅游管理系统登录</h3>
        <el-form-item prop="username">
          <el-input type="text" placeholder="请输入账号" v-model="form.username" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" placeholder="请输入密码" v-model="form.password" />
        </el-form-item>
        <!--              验证码，暂时不要-->
        <!--              <el-form-item prop="code">-->
        <!--                <el-input type="text" style="width: 300px" placeholder="请输入验证码"  v-model="form.code"/>-->
        <!--                <el-image-->
        <!--                    :src="imageUrl"-->
        <!--                    style="width: 100px; height: 40px;float:right;cursor: pointer;"-->
        <!--                    fit="cover"-->
        <!--                    @click="uploadImage"-->
        <!--                    alt="验证码"-->
        <!--                    title="验证码"-->
        <!--                ></el-image>-->

        <!--              </el-form-item>-->

        <el-form-item>
          <el-form-item>
<!--            <span @click="toReg()">没有账号？注册一个</span>-->
            <a href="/reg" style="float: right">没有账号？注册一个</a>
          </el-form-item>
          <div class="login" @click="login('loginForm')">登录</div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Login',

  data() {
    return {
      imageUrl: 'http://localhost:8085/dept/createImageCode',
      form: {
        username: '',
        password: '',
        code: '',
      },
      //表单验证，需要在 el-form-item 元素中增加prop属性
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' }
        ],
      },
    };
  },

  mounted() {

  },

  methods: {
    // toReg() {
    //   this.$router.push('/user')
    // },

    // 获取验证码图片
    uploadImage() {
      // this.imageUrl = getVerifyImage().res.data
      this.imageUrl = ''
      this.$nextTick(()=>{
        this.imageUrl = "http://localhost:8085/dept/createImageCode"
      })
    },
    //登录
    login(formName) {
      // console.log("1111111")
      //将数据进行预校验
      this.$refs[formName].validate(async valid => {
        if (!valid) return
        //这里就发起axios请求后台数据判断是否存在该用户
        const { data: res } = await this.$http.post('/user/login', this.form)
        // console.log(res)
        //管理员存在
        if (res.status) {
          //将登录成功的 管理员返回 存储下了
          window.sessionStorage.setItem('user', JSON.stringify(res.data))
          console.log(res.data)
          //登录成功跳转到主页
          this.$message.success('登录成功')
          // if (res.data.access !== 3) {
          //   // 管理员权限
            this.$router.push('/index')
          // } else {
          //   this.$router.push('/lendApply')
          // }
        }
        else {
          this.$message.error(res.msg)
        }
      })
    },

  },
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
  background-image: url("../assets/images/bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;

  .el-card {
    width: 26%;

    transform: translateY(50%);
    margin-left: 37%;

    .login-box {
      text-align: center;
      min-height: 200px;

      .login-title {
        color: #9c9999;
        transform: translateY(-20px);
      }

      .login {
        color: white;
        width: 100%;
        background-color: #1A8FFF;
        border-radius: 4px;
      }
    }
  }
}
</style>
